<template>
    <div>
        <top-bar></top-bar>
        <left-bar :datas='data'></left-bar>
        <div class="department">
            <div class="system">
                <home-bar :currentPage='currentPage'></home-bar>
                <div class="system-main">
                    <div class="main-position">
                        首页 > 财务管理 > 销售统计
                    </div>
                    <div class="main-height"></div>
                    <div class="main-mains">
                        <div class="main-top-nav">
                            <ul>
                                <router-link to="/sale" @click.native="addPath('/sale','财务管理')">
                                    <li class="active">销售统计</li>
                                </router-link>
                                <router-link to="/income" @click.native="addPath('/income','财务管理')">
                                    <li>收入统计</li>
                                </router-link>
                                <router-link to="/expenditure" @click.native="addPath('/expenditure','财务管理')">
                                    <li>支出统计</li>
                                </router-link>
                                <router-link to="/integral" @click.native="addPath('/integral','财务管理')">
                                    <li>积分统计</li>
                                </router-link>
                                <router-link to="/redpacket" @click.native="addPath('/redpacket','财务管理')">
                                    <li>红包统计</li>
                                </router-link>
                            </ul>
                        </div>
                        <div class="finance-main-mains">
                            <div class="finance-main-mains-top clear">
                                <div class="fl">
                                    <el-date-picker v-model="date1" type="month" placeholder="选择月">
                                    </el-date-picker>
                                </div>
                                <div class="fl finance-main-top-search">
                                    查询
                                </div>
                            </div>
                            <div class="finance-main-mains-mi clear">
                                <div class="fl finance-main-mains-mi-l ">
                                    <div class="finance-l fl">
                                        <div id='task' style="width:80%;height:172px;"></div>
                                        <div class="finance-txts">
                                            <p>80%</p>
                                            <p>本月任务完成率</p>
                                        </div>
                                    </div>
                                    <div class="finance-r fl">
                                        <p>本月有效营业额</p>
                                        <p class="txt">￥2000000.00</p>
                                        <p>今日有效营业额</p>
                                        <p class="txt">￥500000.00</p>
                                    </div>
                                </div>
                                <div class="finance-main-mains-mi-r fl">
                                    <div id="finances" style="height:248px;">
                                    </div>
                                </div>
                            </div>
                            <div class="finance-main-mis">
                                <div>批量导出</div>
                            </div>
                            <div class="finance-main-table">
                                <table>
                                    <tr>
                                        <th>序号</th>
                                        <th>时间</th>
                                        <th>订单号</th>
                                        <th>营业额</th>
                                        <th>信息费</th>
                                        <th>贷款</th>
                                        <th>有效营业额</th>
                                        <th>获得积分</th>
                                    </tr>
                                    <tr v-for="(item,index) in 10" :key="index" :class="{active:index%2==1}">
                                        <td>{{index}}</td>
                                        <td>2018/05/03 11:18</td>
                                        <td>2156255445656</td>
                                        <td>￥50000</td>
                                        <td>￥1000</td>
                                        <td>￥1000</td>
                                        <td>￥3000</td>
                                        <td>2000</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import topBar from "../public/top";
import leftBar from "../public/left";
import homeBar from "../public/homebar";
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/line");
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default {
  components: {
    leftBar,
    topBar,
    homeBar
  },
  data() {
    return {
      data: "/finance",
      currentPage: {
        path: "/sale",
        name: "财务管理"
      },
      date1: ""
    };
  },
  activated() {
    this.finances();
    this.task();
  },
  methods: {
    addPath(n1, n2) {
      //点击切换home-bar
      var obj = {};
      obj.n1 = n1;
      obj.n2 = n2;
      this.$store.commit("addPath", obj);
    },
    finances() {
      //当月财务总体变化
      let myCharts = echarts.init(document.getElementById("finances"));
      let options = {
        title: {
          text: "当月财务总体变化"
        },
        tooltip: {
          trigger: "axis"
        },
        color: ["#62a4e1", "#32d2c9", "#f8a20f"],
        legend: {
          data: ["收入", "支出", "有效营业额"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "收入",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: "支出",
            type: "line",
            stack: "总量",
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: "有效营业额",
            type: "line",
            stack: "总量",
            data: [150, 232, 201, 154, 190, 330, 410]
          }
        ]
      };
      myCharts.setOption(options, true);
      window.addEventListener("resize", function() {
      myCharts.resize();
      });
    },
    task() {
      let myCharts = echarts.init(document.getElementById("task"));
      let options = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
          {
            name: "本月完成任务",
            type: "pie",
            hoverAnimation: false,
            radius: ["80%", "100%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: 30,
                name: "已完成"
              },
              {
                value: 162,
                name: "未完成"
              }
            ]
          }
        ],
        color: ["#66a4e3", "#eeeeee"]
      };
      myCharts.setOption(options, true);
      window.addEventListener("resize", function() {
      myCharts.resize();
      });
    }
  }
};
</script>

<style lang="less">
@import "finance.less";
</style>

